<template>
  <div>
<el-card class="box-card">
  <div slot="header" class="clearfix">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>发布文章</el-breadcrumb-item>
  </el-breadcrumb>
  </div>
  <el-form ref="form" :model="article"  :rules="rules"  label-width="80px">
  <el-form-item label="标题" prop="title">
    <el-input v-model="article.title"></el-input>
  </el-form-item>
  <el-form-item label="内容" prop="content">
    <el-tiptap
      v-model="article.content"
      :extensions="extensions"
      height="500"
      placeholder="请输入文章内容"
    ></el-tiptap>
  </el-form-item>
  <el-form-item label="封面" prop="cover">
    <el-radio-group v-model="article.cover.type">
      <el-radio :label="0">无图</el-radio>
      <el-radio :label="1">单图</el-radio>
      <el-radio :label="3">三图</el-radio>
      <el-radio :label="-1">多图</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="频道" prop="channel_id">
    <el-select v-model="article.channel_id" placeholder="请选择频道">
      <el-option v-for="item in channelinfo" 
      :key="item.id" 
      :label="item.name"  
      :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="publish">发布</el-button>
    <el-button @click="draft">存入草稿</el-button>
  </el-form-item>
</el-form>
</el-card>
  </div>
</template>
<script>
import {uploadImage} from 'network/images.js'
  import { 
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Image,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  HorizontalRule,
  Fullscreen,
  Preview,
  CodeBlock,
  TextColor       
  } from 'element-tiptap'
  export default {
  name:'publish',
  data() {
      return {
        article:{
          title:'',
          content:'',
          // 设置封面的数据
          cover:{ type:0, images:[] },
          channel_id:null
        },
        channelinfo:[],
        extensions: [
          new Doc(),
          new Text(),
          new Paragraph(),
          new Heading({ level: 3 }),
          new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
          new Image({
           uploadRequest (file){
               const fd =new FormData()
               fd.append('image',file)
               return   uploadImage(fd).then(res=>{
                 return  res.data.data.url
               })
             }
           }),
          new Underline(), // 下划线
          new Italic(), // 斜体
          new Strike(), // 删除线
          new HorizontalRule(), // 华丽的分割线
          new ListItem(),
          new BulletList(), // 无序列表
          new OrderedList(), // 有序列表
          new TodoItem(),
          new TodoList(),
          new Fullscreen(),
          new Preview(),
          new CodeBlock(),
          new TextColor()
        ],  
        rules:{
          title:[
            { required: true, message: '请输入文章标题', trigger: 'blur' },
            { min: 5, message: '长度最少为5个字符', trigger: 'blur' }
          ],
          content:[
           { required: true, message: '请输入文章内容', trigger: 'blur' },
          ],
          channel_id:[
           { required: true, message: '请选择频道', trigger: 'blur' },
          ],
          cover:[
           { required: true, message: '请选择图片个数', trigger: 'blur' },
          ]
        }
      }
  },
    created () {
        this.getchannels()
        // 判断是不是编译界面
        const id =this.$route.query.id
        if(id){
          this.geteditorinfo()
        }
      },
    methods: {
     async publish() {

           if(this.$route.query.id){ 
             try{
              let result = await  this.$http({
                method:'put',
                url:`/mp/v1_0/articles/${this.$route.query.id}`,
                params:{
                 draft:false
                },
                data:this.article
              })
              this.$message({
                 showClose: true,
                 message: '修改成功',
                 type: 'success'
               });
              this.$router.push('/article')
             }catch{
              this.$message({
              showClose: true,
              message: '修改失败,请完善信息',
              type: 'error'
              })
             }
           }else{
             try{
                 let result = await this.$http({
                 method:'post',
                 url:'mp/v1_0/articles',
                 params:{
                   draft:false
                 },
                 data:this.article
               })
                 this.$message({
                 showClose: true,
                 message: '发布成功',
                 type: 'success'
               });
               this.$router.push('/article')
             }catch{
              this.$message({
              showClose: true,
              message: '发布失败,请完善信息',
              type: 'error'
              })        
           }
      }
      },
      async draft(){
        console.log(this.$route.query.id)
        if(this.$route.query.id){
          try{
           let result = await this.$http({
             method:'put',
             url:`mp/v1_0/articles/${this.$route.query.id}`,
             params:{
               draft:true
             },
             data:this.article
           })
           console.log(result)
           this.$message({
             showClose: true,
             message: '修改草稿箱信息成功',
             type: 'success'
           });
           this.$router.push('/article')
         }catch{
          this.$message({
          showClose: true,
          message: '修改存入草稿箱失败,请完善信息',
          type: 'error'
         })
         }
        }else{
          try{
           let result = await this.$http({
             method:'post',
             url:'mp/v1_0/articles',
             params:{
               draft:true
             },
             data:this.article
           })
           console.log(result)
           this.$message({
             showClose: true,
             message: '存入草稿箱成功',
             type: 'success'
           });
           this.$router.push('/article')
         }catch{
          this.$message({
          showClose: true,
          message: '存入草稿箱,请完善信息',
          type: 'error'
         })
         }
         }
    
      },
   
      //获取频道数据
      async  getchannels(){
        let result = await this.$http.get('mp/v1_0/channels')
        this.channelinfo = result.data.data.channels
      },
    // 获取编辑界面内容
    async geteditorinfo(id){
      let res = await this.$http.get(`/mp/v1_0/articles/${this.$route.query.id}`)
      this.article = res.data.data
    }
    }
  }
</script>
<style lang="less" scope>

  .el-card{
    margin-top: 15px;
    .el-breadcrumb{
      font-size: 18px;
    }
  }
 
</style>